<template>
  <div class="chart-main-card">
    <div class="title">月度二氧化碳排放</div>
    <div class="chart-main-content">
      <div class="chart" ref="chart" style="width: 100%;height: 100%;"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { dateFormat } from "@/utils/date";
export default {
  components: {},
  data() {
    return {};
  },
  methods: {
    handleChange(row) {
      this.active = row.prop;
    },
    initSeries(option) {
      let series = [];
      for (let index = 0; index < option.list.length; ++index) {
        series.push({
          name: option.legend ? option.name[index] : "",
          type: "line",
          data: option.list[index],
        });
      }
      return series;
    },
    initOptions(option) {
      const series = this.initSeries(option);
      const options = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          textStyle: {
            color: "#fff",
          },
          top: "0",
        },
        grid: {
          top: "40",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "time",
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            color: "#fff",
            formatter: function(value) {
              let date = new Date(value);
              return dateFormat(date, "MM-dd");
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            color: "#fff",
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#999",
            },
          },
        },
        series,
      };
      return options;
    },
    initChart(list) {
      const option = {
        type: "",
        name: ["船舶1", "船舶2"],
        legend: true,
        list,
      };
      this.myChart = echarts.init(this.$refs.chart);
      const options = this.initOptions(option);
      this.myChart.setOption(options);
    },
  },
  mounted() {
    const data = [
      [
        ["2024-04-01", 1],
        ["2024-04-02", 2],
        ["2024-04-03", 3],
        ["2024-04-04", 3],
        ["2024-04-05", 2],
        ["2024-04-06", 4],
        ["2024-04-07", 5],
        ["2024-04-08", 2],
      ],
      [
        ["2024-04-01", 2],
        ["2024-04-02", 3],
        ["2024-04-03", 2],
        ["2024-04-04", 3],
        ["2024-04-05", 4],
        ["2024-04-06", 5],
        ["2024-04-07", 2],
        ["2024-04-08", 3],
      ],
    ];
    this.initChart(data);
  },
};
</script>

<style></style>
